<template>
  <div
    class="icon-link"
    :class="[`icon-link--${size}`, { 'icon-link--light': light }]"
  >
    <component
      class="icon-link__wrapper"
      :is="linkComponent.component"
      v-bind:[linkComponent.href]="isNuxtLink ? returnRoute(url) : url"
      v-bind:[linkComponent.target]="'_blank'"
      v-bind:[linkComponent.type]="'button'"
      @click="clickHandler"
    >
      <span
        v-if="iconUrl"
        class="icon-link__icon"
        :class="{ 'icon-link__icon--jump': !text }"
        :style="`--icon-url: ${iconUrl}`"
      ></span>
      <div
        v-if="text"
        class="icon-link__text"
        :class="[
          { 'icon-link__text--pure-text': !iconUrl },
          { 'disable-effect': isPureText },
        ]"
      >
        <span>{{ text }}</span>
      </div>
    </component>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  linkType: {
    type: String,
    default: 'button',
    validator: (value: string) => ['button', 'outer-link', 'nuxt-link', 'text'].indexOf(value) !== -1,
  },
  iconType: {
    type: String,
    default: '',
  },
  url: {
    type: String,
    default: '#',
  },
  text: {
    type: String,
    default: null,
  },
  size: {
    type: String,
    default: 'md',
    validator: (value: string) => ['sm', 'md'].indexOf(value) !== -1,
  },
  light: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['handleClick', 'clickHandler']);

// Lightweight replacement for the old routeLink mixin's `returnRoute`.
// If the host app exposes a global `localePath` function on window, use it.
function returnRoute(rawUrl: string) {
  emit('handleClick', rawUrl);
}

const linkComponent = computed(() => {
  switch (props.linkType) {
    case 'outer-link':
      return { component: 'a', href: 'href', target: 'target', type: null };
    case 'nuxt-link':
      return { component: 'nuxt-link', href: 'to', target: null, type: null };
    case 'text':
      return { component: 'div', href: null, target: null, type: null };
    default:
      return { component: 'button', href: null, target: null, type: 'type' };
  }
});

const iconUrl = computed(() => {
  if (!props.iconType) return null as string | null;
  const siteType = typeof process !== 'undefined' ? (process as any).env?.siteType : undefined;
  if (siteType == 'campus-yccece') {
    return props.light
      ? `url('/src/assets/icon-${props.iconType}--light.svg')`
      : `url('/src/assets/icon-${props.iconType}--light-blue.svg')`;
  }
  return props.light
    ? `url('/src/assets/icon-${props.iconType}--light.svg')`
    : `url('/src/assets/icon-${props.iconType}.svg')`;
});

const isNuxtLink = computed(() => props.linkType === 'nuxt-link');
const isPureText = computed(() => props.linkType === 'text');

function clickHandler() {
  if (props.url.includes('http')) {
    window.open(props.url, '_blank')
  } else {
    emit('clickHandler')
  }
}
</script>

<style lang="scss" scoped>
.icon-link {
  display: flex;
}

.icon-link__wrapper {
  border: none;
  background: none;
  color: var(--text-color--primary, #001e60);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0;
}

.icon-link__wrapper:hover .icon-link__text span {
  background-size: 100% 1px, 0 1px;
}

.icon-link__icon {
  width: 24px;
  height: 24px;
  background-image: var(--icon-url);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .icon-link__icon {
    width: 16px;
    height: 16px;
  }
}

.icon-link__icon--jump {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icon-link__icon--jump:hover {
  transform: translateY(-8px);
}

.icon-link__text {
  margin-left: 8px;
}

@media (max-width: 767.98px) {
  .icon-link__text {
    margin-left: 4px;
  }
}

.icon-link__text span {
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    var(--text-color--primary, #001e60),
    var(--text-color--primary, #001e60)
  );
  background-size: 0 1px, 100% 1px;
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  padding-bottom: 2px;
}

.icon-link__text--pure-text {
  margin-left: 0;
}

@media (max-width: 767.98px) {
  .icon-link__text--pure-text {
    margin-left: 0;
  }
}

.icon-link__text.disable-effect span {
  background: none;
}

.icon-link--sm .icon-link__wrapper .icon-link__text {
  /* tx-btn styles moved inline to avoid external mixin */
  font-size: 14px;
  line-height: 20px;
}

.icon-link--md .icon-link__wrapper .icon-link__text {
  /* tx-body-p styles moved inline to avoid external mixin */
  font-size: 16px;
  line-height: 24px;
}

.icon-link--light .icon-link__wrapper .icon-link__text {
  color: #f7f7fa;
}

.icon-link--light .icon-link__wrapper .icon-link__text span {
  background-image: linear-gradient(to right, #f7f7fa, #f7f7fa);
}

.icon-link--md .icon-link__wrapper .icon-link__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75
}

@media(max-width: 1023.98px) {
  .icon-link--md .icon-link__wrapper .icon-link__text {
    font-size:14px;
    line-height: 1.714;
    letter-spacing: .01em
  }
}

a, button {
  cursor: pointer;
}
</style>